<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="./css/resert.css">
    <link rel="stylesheet" href="./css/register.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./libs/jquery-validation/jquery.validate.js"></script>
    <script src="./libs/layer/layer.js"></script>
    <style>
        label.error {
            color: #e60000;
            position: absolute;
            left: 0px;
            top: 40px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="loginHead">
        <div class="loginBar">
            <div class="loginBarInner">
                <div class="log fl">
                    <h1>
                        <a href="" title="中国图书网">
                            <img src="./images/login.images/logo5.jpg" alt="中国图书网">
                        </a>
                    </h1>
                </div>
                <div class="ad fr ">
                    <span class="zhengbang fs12">正版好图书</span>
                    <span class="liujiu fs12">全场满69包邮</span>
                    <span class="yizhe fs12">特价书一折起</span>
                </div>
            </div>
        </div>
    </div>
    <div class="registTip w1000">
        <p><span>新用户</span> 注册即送10元组合券（19减5，零售专用；30减5，淘书团专用）</p>
    </div>
    <!-- 注册 -->
    <form class="regWrap content loginWrap">
        <div class="w1000">
            <div class="loginForm">

                <div class="loginTitle fs22">
                    <b>新用户注册</b><span>已有帐号?<a href="">请登录</a></span>
                </div>
                <div class="longinInputWrap">
                    <!-- 手机号码 -->
                    <div class="inputItem">
                        <div class="labInpWr">
                            <!---用户名:-->
                            <div class="label fl">
                                <span>手机号码:</span>
                            </div>
                            <!---输入框-->
                            <div class="inputWrap fl">
                                <span class="inputPad">
                                    <!-- 手机号码 -->
                                    <input name="uphone" type="text" class="inputBlock" value autocomplete="off"
                                        placeholder="请输入您的常用手机号码">
                                </span>
                                <!-- ??? -->
                                <span class="clearInput" style="display: none;"></span>
                            </div>
                        </div>
                        <!--提示文字-->
                        <div class="megTip">
                            <span>请输入常用手机号</span>
                        </div>
                    </div>
                    <!-- 设置密码 -->
                    <div class="inputItem">
                        <div class="labInpWr">
                            <!---用户名:-->
                            <div class="label fl">
                                <span>设置密码:</span>
                            </div>
                            <!---输入框-->
                            <div class="inputWrap fl">
                                <span class="inputPad">
                                    <!-- 密码 -->
                                    <input name="upwd" type="password" class="inputBlock" value autocomplete="off"
                                        id="upwd" placeholder="请输入密码">
                                </span>
                                <!-- ??? -->
                                <span class="clearInput" style="display: none;"></span>
                            </div>
                        </div>
                        <!--提示文字-->
                        <div class="megTip">
                            <span>请设置6到16位登录密码</span>
                        </div>
                    </div>
                    <!-- 确认密码 -->
                    <div class="inputItem">
                        <div class="labInpWr">
                            <!---用户名:-->
                            <div class="label fl">
                                <span>确认密码:</span>
                            </div>
                            <!---输入框-->
                            <div class="inputWrap fl">
                                <span class="inputPad">
                                    <input type="password" class="inputBlock" value autocomplete="off" name="upwd2"
                                        placeholder="请再次输入密码">
                                </span>
                                <!-- ??? -->
                                <span class="clearInput" style="display: none;"></span>
                            </div>
                        </div>
                        <!--提示文字-->
                        <div class="megTip">
                            <span>请再次输入密码</span>
                        </div>
                    </div>
                    <!-- 图片验证码 -->
                    <div class="inputItem">
                        <div class="labInpWr">
                            <!---用户名:-->
                            <div class="label fl">
                                <span>验证码:</span>
                            </div>
                            <!---输入框-->
                            <div class="inputWrap fl imgCodeWrap">
                                <span class="inputPad">
                                    <input type="text" style="display: none;">
                                    <input type="password" style="display: none;">
                                    <input type="text" class="inputBlock" value autocomplete="off" id="uName"
                                        placeholder="请输入右图验证码">
                                </span>
                                <!-- ??? -->
                                <span class="clearInput" style="display: none;"></span>
                            </div>
                            <!-- 验证码图片 -->
                            <div class="imgWrap fl">
                                <img src="./images/login.images/QQ截图20210106155939.jpg" alt="">
                            </div>
                            <div class="changeImgCoad fl fs14">
                                <a href="">换一换</a>
                            </div>
                        </div>
                        <!--提示文字-->
                        <div class="megTip">
                            <span>请输入右图验证码</span>
                        </div>
                    </div>
                    <!-- 手机验证码 -->
                    <div class="inputItem">
                        <div class="labInpWr">
                            <!---用户名:-->
                            <div class="label fl">
                                <span>手机验证码:</span>
                            </div>
                            <!---输入框-->
                            <div class="inputWrap fl telInput">
                                <span class="inputPad fl">
                                    <input type="password" class="inputBlock" value autocomplete="off" id="userName"
                                        placeholder="请输入验证码">
                                </span>
                                <span class="getNumber fl fs14">获取验证码</span>
                                <!-- ??? -->
                                <span class="clearInput" style="display: none;"></span>
                            </div>
                        </div>
                        <!--提示文字-->
                        <div class="megTip">
                            <span>请输入获得的手机验证码</span>
                        </div>
                    </div>

                    <!-- 注册按钮 -->
                    <button class="loginBtn" id="loginBtn" style="padding: 0px;border: none;">
                        <a>立即注册</a>
                    </button>
                </div>

                <a href="" target="_blank" title="购买" class="toBuy fl"><img src="./images/login.images/300150.jpg"
                        alt="购买"></a>
            </div>
        </div>
    </form>


    <!-- 底部 -->
    <div class="loginRegistFoot">
        <div class="footNav">
            <ul>
                <li><a href="">本站简介</a></li>
                <li><a href="">帮助中心</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">招聘英才</a></li>
            </ul>
        </div>
        <div class="certifica">
            <div class="width820 clearfix">
                <div class="credit_certifica fl">
                    <a href="" target="_blank" title="中国图书网城信认证">
                        <img src="./images/login.images/chengxin.jpg" alt="诚信认证">
                    </a>
                    <a href="" target="_blank" title="中国图书网电子商务诚信认证">
                        <img src="./images/ectrust.gif" alt="诚信认证">
                    </a>
                </div>
                <div class="licence fl fs12">
                    <p>
                        <a href="" target="_blank">京ICP备09013606号-3</a>
                        <a href="" target="_blank">京信市监发[2002]122号</a>
                        <a href="" target="_blank">海淀公安分局备案编号：1101083394</a>
                    </p>
                    <p>
                        <a href="" target="_blank">营业执照出版物经营许可证</a>
                        <a href="#" target="_blank">京出发京批字第直110071</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 侧边 -->
    <div class="cusSer">
        <div class="cusSerIn">
            <div class="slide_min fs14">联系客服</div>
        </div>
    </div>
</body>

</html>
<script>

    $(function () {

        //只能校验输入之后吗?
        $(".regWrap").validate({
            rules: {
                uphone: {
                    required: true,
                    digits: true, //整形
                    rangelength: [11, 11],
                },
                upwd: {
                    required: true,
                    rangelength: [6, 18]
                },
                upwd2: {
                    equalTo: "#upwd",
                },
            },

            messages: {
                uphone: {
                    required: "请输入您的常用手机号",
                    digits: "手机号不合法",
                    rangelength: "请输入11位手机号",
                },
                upwd: {
                    required: "请输入密码",
                    rangelength: "请输入6到16位密码",
                },
                upwd2: {
                    // required: "密码不能为空",
                    equalTo: "两次密码不一致",
                },

            },
            submitHandler() {
                $.ajax({
                    url: "./account/reg",
                    type: "post",
                    data: $("form").serialize(),  //前端发送到服务器的数据 data
                }).then(function (response) {      // 服务器响应到前端的数据 data
                    console.log(response);
                    if (response.status == 200){
                        console.log(response.status);
                        layer.msg("注册成功");
                    }else{
                        console.log(msg);
                    }
                    // layer.open()
                    // layer.msg()

                    // if (response.status == 200) {
                    //     layer.msg("注册成功");
                    // } 
                    // else {
                    //     layer.msg("注册失败");//没生效,注册失败没显示
                    // }
                    // // layer.confirm("提示的问题",{按钮},回调函数,回调函数)
                    // // 两个按钮,默认点前面那个并不会关闭窗口,写了下面这一句才会
                    // layer.confirm("提示的问题", {
                    //     btn: ["确认", "取消"]
                    // }, function (index) {
                    //     //默认是不会关团窗口
                    //     layer.close(0);//点完确定之后才会关闭窗口

                    // }, function () {

                    // });
                })

                return false;
            }
        })


        $("input").on("focus", function () {
            $(this).parents(".inputWrap").css({
                "border": "1px #666 solid"
            })
        }).on("blur", function () {
            $(this).parents(".inputWrap").css({
                "border": "1px #e60000 solid"
            })
        })

        // $.validator.addMethod("checkName", function () {
        // })//自己的规则


    })


</script>